<template>
	<view>
        <!-- 需设置:sticky="true", 此时应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption">
            <view :style="{height: topHeight+'px', overflow:'hidden'}">
                <view>特别注意、特别注意、特别注意：</view>
                <view>1、有bug: 苹果手机小程序环境下回弹慢，一直不停上滑时，导致加载瀑布流分页延迟 (必须要停下来让回弹动画停止后才会触发分页瀑布流)</view>
                <view>2、所以非全屏时(页面中tab模块顶部还有其他内容)且存在sticky模块的页面慎用</view>
                <view>3、tab模块顶部还有其他内容时建议用这个实例：mescroll-more</view>
            </view>
            <!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
			<view class="sticky-tabs">
                <!-- TAB头：当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
                <me-tabs v-model="tabIndex" :tabs="tabs" :tab-width="150" :height="tab_height"></me-tabs>
            </view>
            <swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
                <swiper-item v-for="(tab,i) in tabs" :key="i">
                    <mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs" :height="height" :disable-scroll="disableScroll"></mescroll-item>
                </swiper-item>
            </swiper>

        </mescroll-body>
	</view>
</template>

<script>
/**
 * 一、使用方法指引：
 *   1、使用此插件所需要本页面代码外，还需以下6处文件或文件夹：uni_modules/mescroll-uni、static/mescroll-uni、components/me-tabs、${swiper}.vue、${swiper}/item.vue、${swiper}/me-list.vue
 *   2、指定tab头参数（this.tabs 或 api获取tab则设置好路径即可this.tabs_api_url）
 *   3、修改import MescrollItem from '待修改的vue文件路径'
 *   4、关于tab-width宽度，如果是固定非滑动的则总750rpx给相应tab平分即可
 *   5、接下来移步至兄弟页面：${swiper}/item.vue
 * 二、参考 & 备注
 *   1、官网文档：https://www.mescroll.com/uni.html
 *   2、mescroll插件市场来源：https://ext.dcloud.net.cn/plugin?id=343
 *   3、注：一个.vue文件只能存在一个mescroll组件, 如果要多mescroll组件, 需分别封装到子组件中，如: tab切换, 页面存在多个mescroll组件, 那么请严格参考mescroll-swiper.vue 示例的写法，即需要swiper.vue 》 swiper/item.vue 》 swiper/me-list.vue
 */
//加载列表数据循环元素体文件：mescroll-swiper
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollItem from "./mescroll-swiper/item.vue";

export default {
	//使用mixin
    mixins: [MescrollMixin],
    components: {
        /***** mescroll S *****/
        //注册组件
        MescrollItem
        /***** mescroll E *****/
    },
    data() {
        return {
            /***** mescroll S *****/
            //主体框架只启用下拉刷新
            upOption:{
                use: false
            },
            //swiper列表是否禁止滚动
            disableScroll: true,
            //顶部内容的高度 (单位px)
            topHeight: uni.upx2px(1000),
			//定义tab的高度
			tab_height: 90,
            //指定tab头的api路径
            tabs_api_url: 'demo/swiper_tab',//'demo/swiper_tab',
            //tab头选项（如设置了this.tabs_api_url则this.tabs为空数组即可）
			tabs: [], //格式示例：[{tabId:'all',name:'全部'}, {tabId:'t1',name:'奶粉'}, {tabId:'t2',name:'面膜'}, {tabId:'t3',name:'图书'}, {tabId:'t4',name:'果汁'}, {tabId:'t5',name:'奶瓶'}, {tabId:'t6',name:'美素'}, {tabId:'t7',name:'花王'}, {tabId:'t8',name:'韩蜜'}],
			//默认tab的current下标（0，1，2，3...）
            tabIndex: 0,
		    //需要固定swiper的高度
			height: "",
            /***** mescroll E *****/
        }
    },
    onLoad(option) {
        var that = this;
        /***** mescroll S *****/
        //需要固定swiper的高度 (需减去悬浮tabs的高度)【如果出现滑动时顶部loading效果出不来，可能是页面头部自定义导致的，可能要特殊减去一个高度uni.upx2px(this.disableScroll?250:0)】
        this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(this.tab_height) + 'px';
        //api获取tab数据
        if(this.tabs_api_url!='') {
            this.ajax({ url: this.tabs_api_url }).then(res => {
                this.tabs = res.data;
            });
        }
        //如果带有$_GET[tabindex]参数，则指向相应的tab的current
        if(typeof(option.tabindex)!='undefined' && option.tabindex)
            this.tabIndex = option.tabindex;
        //供其他页面使用的刷新事件监听：刷新当前TAB【在其他页面调用刷新的方法：uni.$emit('refreshTabs');】
        uni.$on('refreshTabs',function(){
            that.$refs.mescrollItem[that.tabIndex].refreshTab();//特别注意：这里需要指定tabindex的值；以及这里不能用this
        });
        /***** mescroll E *****/
    },
    /**
     * 页面的滚动事件
     */
    onPageScroll(e){
        /***** mescroll S *****/
        this.disableScroll = Math.ceil(e.scrollTop) < this.topHeight
        /***** mescroll E *****/
    },
    watch: {
        /***** mescroll S *****/
        tabIndex(i) {
            // 当列表禁止滚动时,需把列表滚动条置顶 (解决问题: "全部"tab翻到第二页,切换到其他tab,滚动到顶部,再切回"全部"tab,此时的列表数据应该重头开始)
            if(this.disableScroll){
                this.disableScroll = false // 当disableScroll=true时,scroll-view的scrollTo会失效,需先开启,再置顶
                this.$nextTick(()=>{
                    let mescroll = this.getMescroll(i)
                    mescroll && mescroll.scrollTo(0,0)
                    setTimeout(()=>{ // 经测试android真机需延时300ms才能恢复禁止滚动,否则scrollTo有可能无效
                        this.disableScroll = true
                    },300)
                })
            }
        }
        /***** mescroll E *****/
    },
    methods: {
        /***** mescroll S *****/
        /**
         * 当用户操作滑动内容时，更新tab头的current值
         */
        swiperChange(e) {
            this.tabIndex = e.detail.current
        },
        /**
         * 获取指定下标的mescroll对象
         */
        getMescroll(i){
            let mescrollItems = this.$refs.mescrollItem;
            if(mescrollItems){
                let item = mescrollItems[i]
                if(item) return item.mescroll
            }
            return null
        },
        /***** mescroll E *****/
    }
}
</script>

<style>
/***** mescroll S *****/
/*
sticky生效条件：
1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
*/
.sticky-tabs{
    z-index: 990;
    position: sticky;
    top: var(--window-top);
    background-color: #fff;
}
/***** mescroll E *****/
</style>
